<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="名称搜索" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
          placeholder="发布地区"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item prop="effect">
        <KiSelect
          v-model="list.filter.effect"
          :options="[
            { dataValue: true, dataName: '生效中' },
            { dataValue: false, dataName: '未生效' }
          ]"
          placeholder="是否生效"
          :filterable="false"
        />
      </el-form-item>
      <el-form-item prop="type">
        <el-select v-model="list.filter.type" placeholder="类型">
          <el-option label="通知" :value="0"></el-option>
          <el-option label="公告" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <!-- <el-table-column label="权限" prop="authority"/> -->
      <el-table-column label="名称" prop="name" />
      <el-table-column label="发布人" prop="publisher" />
      <el-table-column label="类型">
        <template slot-scope="scope">
          <p v-if="scope.row.type == 0">通知</p>
          <p v-if="scope.row.type == 1">公告</p>
        </template>
      </el-table-column>
      <el-table-column label="发布账号" prop="account" />
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="生效起期">
        <template slot-scope="{ row }">
          {{ $dayjs(row.startTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column label="生效止期">
        <template slot-scope="{ row }">
          <template v-if="row.endTime">
            {{ $dayjs(row.endTime).format('YYYY-MM-DD') }}
            <Expired :endTime="row.endTime" />
          </template>
        </template>
      </el-table-column>
      <el-table-column label="公告内容" prop="text">
        <template slot-scope="{ row }">
          <el-button @click="preview(row)" size="mini">预览</el-button>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
          <auth-button @click="handleBtnStickTop(row)" name="置顶" v-if="row.top!=1"/>
          <auth-button @click="handleBtnStickTop(row)" name="取消置顶" v-if="row.top==1"/>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="公告名称" prop="name" verify>
          <el-input
            v-model="form.data.name"
            maxlength="30"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="发布人" prop="publisher" :rules="special">
          <el-input
            v-model="form.data.publisher"
            maxlength="10"
            placeholder="请输入发布人姓名"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="发布地区" prop="authority" verify>
          <RegionSelect
            v-model="form.data.authority"
            :props="{
              checkStrictly: true,
              multiple: false
            }"
          />
        </el-form-item>
        <el-form-item label="生效开始时间" prop="startTime" verify>
          <el-date-picker
            v-model="form.data.startTime"
            placeholder="生效开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="生效结束时间" prop="endTime">
          <el-date-picker
            v-model="form.data.endTime"
            placeholder="生效结束时间"
            value-format="yyyy-MM-dd 23:59:59"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="公告类型" prop="type" verify>
          <el-select v-model="form.data.type" placeholder="类型">
            <el-option label="通知" :value="0"></el-option>
            <el-option label="公告" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="text" verify>
          <MiniMCE v-model="form.data.text" :disabled="form.status === 'r'" />
        </el-form-item>
      </template>
    </KiFormDialog>

    <el-dialog
      title="预览"
      :visible.sync="richTextPreview"
      :close-on-click-modal="false"
    >
      <div v-html="rowRichText" class="mce-content-body"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="richTextPreview = false">关 闭</el-button>
      </div>
    </el-dialog>


    <KiFormDialog
      :show.sync="stickTopForm.show"
      title="置顶提示"
      v-model="stickTopForm.data"
      :loading="stickTopForm.loading"
      width="35%"
      ref="stickTopRef"
    >
      <template #el-form>
        <h4 class="top-class">确认{{stickTopForm.data.top!=1 ? '置顶' : '取消置顶'}}这条公告/通知吗？</h4>
        <FormItemTip>公告/通知置顶后会在小程序首页展示</FormItemTip>
        <FormItemTip>只能置顶一条公告或通知</FormItemTip>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleStickTopOk"
          :loading="stickTopForm.loading"
        >确 定</el-button>
      </div>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { getUserInfo } from '@/utils/auth.js'
import { special } from '@/utils/validate-ruler.js'
import Expired from '@/components/Expired'

export default {
  mixins: [pageMixin],
  components: { Expired },
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'one-travel-api/news-info'
      },
      {
        beforeSubmit () {
          if (this.form.data.endTime) {
            let start = new Date(this.form.data.startTime).getTime()
            let end = new Date(this.form.data.endTime).getTime()
            if (start > end) {
              this.$swal({
                message: '开始时间不能大于结束时间',
                type: 'warning'
              })
              return false
            }
          }
        }
      }
    ),
  data () {
    return {
      special,
      richTextPreview: false,
      rowRichText: '',
      roles: [],
      isAdmin: getUserInfo().isAdmin,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      stickTopForm : {
        loading : false,
        show : false,
        data : {
          id : undefined ,
          top : undefined
        }
      }
    }
  },
  methods: {
    preview (row) {
      this.rowRichText = row.text
      this.richTextPreview = true
    },
    // 点击置顶/取消置顶按钮
    handleBtnStickTop(row) {
      this.$set(this.stickTopForm,"show",true)
      this.$set(this.stickTopForm,"data",row)
    },
    // 提交置顶/取消置顶 (置顶状态（是否置顶 0否， 1是）)
    handleStickTopOk(){
      this.$set(this.stickTopForm,"loading",true)
      this.$POST('one-travel-api/news-info/updateTop', {
        id : this.stickTopForm.data.id,
        top : this.stickTopForm.data.top ? 0 : 1
      })
      .then(res => {
        this.$swal.success('操作成功')
        this.$set(this.stickTopForm,"show",false)
        this.getList()
      })
      .finally(_ => {
        this.$set(this.stickTopForm,"loading",false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-class{
  font-size: 16px;
  color :#f00;
}
</style>
